<template>
  <div class="m-2">
    <div v-if="importConfig.showAction">
       <Tooltip placement="bottom" :mouse-enter-delay="1" :overlay-style="{ width: '210px' }">
        <template #title>
          当数据重复时候执行的策略
        </template>

        <span class="mr-1">重复策略</span>
        <span style="padding-right: 1px">:</span>
        <RadioGroup v-bind="attrs" v-model:value="importAction">
          <Radio value="ignore">忽略</Radio>
          <Radio value="update">更新</Radio>
      
        </RadioGroup>
      </Tooltip>
      
      <a-button class="ml-4" @click="handleDownloadTemplate()" type="text">
        <Icon icon="i-fa:file-excel-o" />
        下载模板
      </a-button>
    </div>
    <div class="mt-2 mb-4">
      <span v-if="importConfig.tips">
        提示：
        <span v-html="importConfig.tips"></span>
      </span>
      <slot name="tips"></slot>
      <a-button v-if="!importConfig.showAction" class="ml-2" @click="handleDownloadTemplate()" type="text">
        <Icon icon="i-fa:file-excel-o" />
        下载模板
      </a-button>
    </div>
    <Upload :accept="acceptFileTypes" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
      <a-button> <Icon icon="i-ant-design:upload-outlined" /> 选择文件 </a-button>
      <span class="ml-4">{{ uploadInfo }}</span>
    </Upload>
  </div>
</template>
<script lang="ts" setup>
  import { Radio } from "ant-design-vue"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Upload, Tooltip } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { FileType } from 'ant-design-vue/es/upload/interface';
  import { watch } from "vue"

  import { ref, computed, unref } from "vue"
  import { downloadByRequestUrl } from "/@/utils/file/download"
  import { importExcelProps } from './props'

  const emit = defineEmits(["register", "update:file-list", "update:action"])
  const attrs = useAttrs()
  const props = defineProps(importExcelProps)
  const importAction = ref('ignore')
  const RadioGroup = Radio.Group
  const { t } = useI18n('excel');
  const fileList = ref<FileType[]>([]);
  const uploadInfo = ref('');

  const beforeUpload = (file: FileType) => {
    fileList.value = [file];
    emit('update:file-list', fileList.value )
    return false;
  };

  const handleRemove = () => {
    fileList.value = [];
    emit('update:file-list', [])
  };

  watch(
    () => importAction.value,
    (val: any) => {
      emit('update:action', val)
    },
    { immediate: true}
  )


  const handleDownloadTemplate = async () => {
    // await downloadByRequestUrl({
    //   url: props.importConfig.tmplUrl,
    //   // fileName: props.importConfig.fileName,
    // })
  }

</script>

<style lang="less" scoped>
.import-tips {
  margin-top: 20px;
  display: flex;
  justify-content: center
}
</style>
